<template>
  <div class="base-header">
    <el-button type="primary">主要按钮</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

defineProps({
  msg: String,
})

const count = ref(0)

</script>


<style scoped lang="scss">
.base-header {
  height: 3rem;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #5a82f0;
  z-index: 999;
  // 渐变
  // background: linear-gradient(180deg, #5a82f0 0%, #0a011a 100%);

  // 阴影
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);

  // 动效透明度
  content: '';
  // animation: header-shadow-animation 5s infinite;

  @keyframes header-shadow-animation {
    0% {
      opacity: 0.9;
    }

    50% {
      opacity: 0.5;
    }

    100% {
      opacity: 0.9;
    }
  }
}
</style>
